<template>
  <el-container class="rich_content">
    <el-header style="-webkit-app-region: drag;height: 30px;"></el-header>
    <el-container>
<!--      <el-aside style="width:80px;height: 100%;">-->
<!--        <NavBar @emitNavClick="emitNavClick"></NavBar>-->
<!--      </el-aside>-->
      <el-main>
        <component :id="id" :is="componentName"></component>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
import {ipcRenderer} from 'electron'
import MainIndex from "@/components/MainIndex";
import NavBar from "@/components/NavBar";
import CreateTaskIndex from "@/components/CreateTaskIndex";
import UserLists from "@/components/UserLists";
import TaskListsIndex from '@/components/TaskListsIndex.vue';
export default {
  name: 'Home',
  data(){
    return {
      id:0,
      componentName:"CreateTaskIndex"
    }
  },
  methods:{
    emitNavClick(params){
      if(params.op === 'createTask'){
        this.componentName = 'CreateTaskIndex'
      } else if(params.op == 'userLists'){
        this.componentName = 'UserLists'
      } else if(params.op == 'aboutSoft'){
        ipcRenderer.send('open-about-window','about')
      } else if(params.op == 'fiveLive'){
        this.$message.error('程序猿小哥哥紧急开发中...别着急哦～');
      } else if(params.op == 'muduLive'){
        this.$message.error('程序猿小哥哥紧急开发中...别着急哦～');
      } else if(params.op == 'taskLists'){
        this.componentName = 'TaskListsIndex'
      }
    }
  },
  components: {UserLists, CreateTaskIndex, NavBar, MainIndex,TaskListsIndex}
}
</script>
<style scoped>
.el-container .el-aside{
  position: relative;
}
.el-container .el-aside .tools{
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: absolute;
  bottom: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  font-size: 25px;
  color: #909399;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
.el-main{
}

</style>
